<template>
    <div class="todayData">
        <el-card class="box-card">
            <div class="title">
                <div class="titleInfo">
                    今日数据
                </div>
                <el-button type="text" class="button" @click="button()">
                        详细数据 >
                </el-button>
            </div>
            <div class="info">
                <div class="label">
                    <div class="infoTop">营业额</div>
                    <div class="infoMid">
                        ￥ {{ res.turnover }}
                    </div>
                </div>
                <div class="label">
                    <div class="infoTop">有效订单</div>
                    <div class="infoMid">
                         {{ res.validOrderCount }}
                    </div>
                </div>
                <div class="label">
                    <div class="infoTop">订单完成率</div>
                    <div class="infoMid">
                        {{ res.orderCompletionRate * 100 }} %
                    </div>
                </div>
                <div class="label">
                    <div class="infoTop">平均客单价</div>
                    <div class="infoMid">
                        ￥ {{ res.unitPrice }}
                    </div>
                </div>
                <div class="label">
                    <div class="infoTop">新增会员</div>
                    <div class="infoMid">
                         {{ res.newUsers }}
                    </div>
                </div>
            </div>
        </el-card>
    </div>

</template>

<script>
import {businessData} from '@/api/workspace'
export default {
    data(){
        return{
            res:{
                turnover: 0,
                validOrderCount: 0,
                orderCompletionRate: 0,
                unitPrice: 0,
                newUsers: 0
            }
        }
    },
    created(){
        businessData().then(res=>{
            this.res = res.data
        }).catch(err=>{
            console.log(err)
        })
    },
    methods:{
        button(){
            this.$router.push('/home/statistic')
            this.$store.state.menu_active = 2
        }
    }
}
</script>

<style scoped>
.text {
    font-size: 14px;
}

.item {
    padding: 18px 0;
}

.box-card {
    /* width: 480px; */
    width: 100%;
    height: 180px;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    /* justify-content: space-around; */
}

.todayData{
    width: 100%;
    height: 180px;
    margin-top: 5px;
}

.label{
    width: 18%;
    height: 80%;
    border-radius: 5px;
    background: rgb(236,245,255);
}

.box-card:hover{
    /* margin-top: -5px; */
    transform: scale(1.005);
    box-shadow: 0 0 10px 2px #d5d4d4;/*盒子阴影*/
    transition: all 0.5s;/*持续时间*/

}

.title{
    height: 30px;
    display: flex;
    justify-content: space-between;
}

.info{
    width: 100%;
    height: 85%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    margin-top: -8px;
}

.titleInfo{
    font-weight: bold;
}

.button{
    align-self: end;
    color: #9e9e9e;
    font-weight: 500;
}

::v-deep .box-card .el-card__body{
    height: 100%;
}

.infoTop{
    font-size: 14px;
    height: 50%;
    align-items: center;
    line-height: 40px;
    text-align: left;
    margin-left: 15px;
}

.infoMid{
    font-weight: bold;
    font-size: 26px;
    height: 80%;
    text-align: left;
    margin-left: 15px;
}
</style>